<template>
  <div class="some-radio-program">
    <home-nav :title="store.currentInfo.topTitle" :more="false"/>
    <ul>
      <li v-for="program in toplist" :key="program?.program?.id" class="mb-2 flex">
        <div class="w-15 h-15 mr-2">
          <img class="w-full h-full" v-lazy="program?.program?.blurCoverUrl" alt="">
        </div>
        <div class="flex flex-col justify-around">
          <span class="w-50 truncate yu-textColor-hover" @click="jumpRadioProgram(program?.program?.id)">{{ program?.program?.name }}</span>
          <span class="text-xs w-50 truncate yu-titleColor">{{ program?.program?.radio?.name }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {useStore} from "@/store/index";
import {ref} from "vue";
import {useRouter} from "vue-router";
const store = useStore()
const router = useRouter()
const toplist = ref()

store.getDjProgramToplist({ limit: 5 }).then(toplist1 => {
  toplist.value = toplist1
  // console.log(toplist)
})

// 点击标题跳转到电台节目详情
const jumpRadioProgram = (id) => {
  router.push({
    path: '/radio-program',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
